<template>
  <div class="login-container">
    <div class="login-left">
      <div class="bg" />
      <!--<i class="icon" />-->
    </div>
    <div class="login-right">
      <div class="title-container">
        <h3 class="title2">欢迎登录</h3>
        <h5 class="title">四轮车充电桩系统</h5>
      </div>
      <div class="form-container">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
          label-position="left">
          <el-form-item prop="username" class="login-form-item">
            <el-input ref="username" v-model="loginForm.username" placeholder="请输入手机号" name="username" type="text"
              tabindex="1" auto-complete="on" />
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
          </el-form-item>

          <el-form-item prop="password" class="login-form-item">
            <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
              placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
            <span class="svg-container">
              <svg-icon icon-class="password" />
            </span>
          </el-form-item>
          <el-button :loading="loading" type="primary" class="login-btn"
            @click.native.prevent="handleLogin">登录</el-button>
        </el-form>
      </div>
      <div class="tips">
        <span>全国服务电话：18601938676</span>
        <span>Copyright: 2010-2022 充电桩云平台 陇ICP备 17005862号</span>
        <!-- <span>版权所有 宁夏普天动能信息技术有限公司</span>-->
      </div>
    </div>
    <div class="QRcode-box" :class="isShowQR ? 'show-QRcode' : ''" @click="isShowQR = !isShowQR"></div>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'

export default {
  name: 'LoginNew',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码最少为6位'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      isShowQR: false
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/' })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
          // login(this.loginForm).then(() => {
          //   alert(1)
          //   this.$router.push({ path: this.redirect || '/' })
          //   this.loading = false
          // }).catch(() => {
          //   this.loading = false
          // })
        } else {
          return false
        }
      })
    }
    // handleLogin() {
    //   this.$refs.loginForm.validate(valid => {
    //     if (valid) {
    //       this.loading = true
    //       this.$store.dispatch('user/login', this.loginForm).then(() => {
    //         this.loading = false
    //         this.$router.push({ path: this.redirect || '/', query: {isShow: true}})
    //         setTimeout(()=>{
    //           location.reload();
    //         },100);
    //       }).catch(() => {
    //         this.loading = false
    //       })
    //     } else {
    //       console.log('error submit!!')
    //       return false
    //     }
    //   })
    // },
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg: #061731;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  display: flex;
  position: absolute;

  .login-left {
    width: 40%;
    height: 100vh;
    background-color: #030D1D;
    position: relative;

    .bg {
      position: absolute;
      height: 1080px;
      width: 100%;
      background-image: url('~@/../public/images/login_bg.png');
      background-repeat: no-repeat;
      bottom: 0;
    }

    .icon {
      position: absolute;
      background-image: url('~@/../public/images/new_logo.png');
      background-repeat: no-repeat;
      display: inline-block;
      width: 72px;
      height: 35px;
      margin: 30px;
    }
  }

  .login-right {
    position: relative;
    width: 60%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    // justify-content: center;
    // align-items: space-between;
    .title-container {
      position: relative;
      margin: 150px 0 0 120px;

      .title {
        font-size: 40px;
        color: $light_gray;
        margin: 0px auto 20px auto;
        font-weight: 500;
      }

      .title2 {
        font-size: 20px;
        color: #DDE6F1;
        margin: 0px auto 20px auto;
      }
    }

    .form-container {
      height: 100%;
      display: flex;
      align-items: center;

      .login-form {
        margin-left: 120px;
        margin-bottom: 100px;

        .login-form-item:last-of-type {
          margin-top: 40px;
        }

        .login-form-item {
          width: 400px;
        }

        ::v-deep .el-form-item {
          background-color: #10253D;
          border: none;
        }
      }
    }
  }

  .tips {
    font-size: 14px;
    color: #40556F;
    position: absolute;
    bottom: 0;
    height: 50px;
    border-top: 1px solid #1A283A;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;

    span {
      margin-left: 16px;
      border-left: 1px solid #40556F;
      padding-left: 20px;

      &:first-of-type {
        margin-left: 0;
        border: none;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .login-btn {
    width: 400px;
    height: 44px;
    margin-top: 100px;
    background-color: #034BC1;
    border: none;
    letter-spacing: 5px;
    font-size: 16px;
  }

  .QRcode-box {
    transition: 1s;
    height: 100px;
    width: 100px;
    position: absolute;
    right: -50px;
    top: 50%;
    margin-top: -129px;
    border-radius: 50%;
    border: 10px solid #10253E;
    cursor: pointer;
    background-image: url('~@/../public/images/QRcode.jpg');
    background-size: 100px;
    background-position: center;
  }

  .show-QRcode {
    transition: .3s;
    right: 0;
    border-radius: 0;
    width: 200px;
    height: 200px;
    background-size: 200px;
  }
}
</style>
